<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"><head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>进货管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
  <!-- 引入样式 -->
<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/resources/css/public.css" media="all">
</head>
<body class="childrenBody">
<fieldset class="layui-elem-field layui-field-title">
    <legend>查询条件</legend>
</fieldset>
<form class="layui-form" id="searchForm" method="post">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" >供应商</label>
            <div class="layui-input-inline">
                <input type="text" name="providername"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" >商品名称</label>
            <div class="layui-input-inline">
                <input type="text" name="goodsname"  autocomplete="off" class="layui-input">
            </div>
        </div>
         <div class="layui-inline">
            <label class="layui-form-label" >开始时间</label>
            <div class="layui-input-inline">
                <input type="text" name="startTime"  id="startTime" autocomplete="off" class="layui-input">
            </div>
        </div>
         <div class="layui-inline">
            <label class="layui-form-label" >结束时间</label>
            <div class="layui-input-inline">
                <input type="text" name="endTime" id="endTime"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="text-align: center;">
        <a class="layui-btn search_btn" id="doSearch">查询</a>
        <button type="reset" class="layui-btn layui-btn-warm">清空</button>
    </div>
</form>
<table id="inportList" lay-filter="inportList"></table>
<!--表格工具条-->
<div  style="display: none;" id="tableToolBar">
	<a class="layui-btn layui-btn layui-btn"  shiro:hasPermission="inport:create" lay-event="add">添加</a>
</div>
<!--操作-->
<div   style="display: none;" id="inportListBar">
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" shiro:hasPermission="inport:delete" >删除</a>
</div>

<!-- 添加和修改开始 -->
<div id="dataFrmContent" style="padding: 10px;display: none;" >
	<form class="layui-form" method="post" id="dataFrm" lay-filter="dataFrm" >
		 <div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">供应商</label>
		      <div class="layui-input-inline">
		      	<input type="hidden" name="id">
		         <select name="providerid" id="providerid" lay-filter="providerid"  lay-verify="required" >
                 	<option value="">请选择供应商</option>
			     </select>
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">商品名称</label>
		      <div class="layui-input-inline">
		       <select name="goodsid" id="goodsid"  lay-verify="required" >
                 	<option value="">请选择商品</option>
			     </select>
		      </div>
		    </div>
		 </div>
		 <div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">进货数量</label>
		      <div class="layui-input-inline">
		      	<input type="hidden" name="id">
		        <input type="text" name="number" lay-verify="required" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">进货价格</label>
		      <div class="layui-input-inline">
		        <input type="text" name="inportprice"   placeholder="公司电话" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		 </div>
		<div class="layui-form-item">
			<label class="layui-form-label">支付类型</label>
			<div class="layui-input-block">
				<input type="radio" name="paytype" value="微信" title="微信" checked="">
				<input type="radio" name="paytype" value="支付宝" title="支付宝">
				<input type="radio" name="paytype" value="银联" title="银联">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">进货备注</label>
			<div class="layui-input-block">
				 <textarea placeholder="请输入备注" name="remark" class="layui-textarea"></textarea>
			</div>
		</div>
		<div class="layui-form-item" style="text-align: center;">
			<button type="button" class="layui-btn" lay-submit="" lay-filter="doSubmit">提交</button>
			<button type="reset" class="layui-btn layui-btn-warm">重置</button>
		</div>
	</form>
</div>
<!-- 添加和修改结束 -->

<script type="text/javascript" src="/resources/layui/layui.js"></script>
</body>
<script type="text/javascript">
    var tableIns;
    layui.use(['form','layer','table','laydate'],function(){
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery,
            laydate=layui.laydate,
            table = layui.table;
        //渲染时间选择器
        laydate.render({
        	elem:'#startTime',
        	type:'datetime'
        });
        laydate.render({
        	elem:'#endTime',
        	type:'datetime'
        })
        //进货列表
        tableIns = table.render({
            elem: '#inportList',
            url : '/inport/loadAllInport',
            cellMinWidth : 95,
            toolbar: '#tableToolBar',
            page : true,
            height : "full-220",
            limits : [10,15,20,25],
            defaultToolbar: ['filter','print'],
            limit : 10,
            id : "inportListTable",
            cols : [ [
	            {field: 'id', title: 'ID', minWidth:80, align:"center"},
                {field: 'goodsname', title: '商品名称', minWidth:100, align:"center"},
                {field: 'providername', title: '供应商', minWidth:100, align:"center"},
                {field: 'inporttime', title: '进货时间', minWidth:100, align:"center"},
                {field: 'number', title: '进货数量', minWidth:100, align:"center"},
                {field: 'inportprice', title: '进货价格', minWidth:100, align:"center"},
                {field: 'operateperson', title: '操作员', minWidth:100, align:"center"},
                {field: 'remark', title: '备注', minWidth:100, align:"center"},
                {field: 'paytype', title: '支付方式', minWidth:100, align:"center"},
                {title: '操作', minWidth:185, templet:'#inportListBar',fixed:"right",align:"center"}
            ] ]
        });

        //查询
        $("#doSearch").click(function(){
            var params=$("#searchForm").serialize();
            table.reload('inportListTable', {
                url: '/inport/loadAllInport?'+params
            });
        });
        //监听头工具栏事件
        table.on('toolbar(inportList)', function(obj){
            switch(obj.event){
	            case 'add':
	               	toAddInport();
                	break;
            };
        });

        //打开 添加进货的弹出层
        var url="";
        var mainIndex;
        function toAddInport(){
            mainIndex = layui.layer.open({
                title : "添加进货",
                type : 1,//页面层
                area:["1000px","500px"],
                content : $("#dataFrmContent"),
                skin:'layui-layer-molv',
                success : function(layero, index){
                    setTimeout(function(){
                        layui.layer.tips('点击此处返回进货列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    },500);
                    $("#dataFrm")[0].reset();
                    initProviderSelect($("#providerid"));
                    url="/inport/addInport"
                    form.render();
                }
            })
            //layui.layer.full(index);
            //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
            $(window).on("resize",function(){
                layui.layer.full(mainIndex);
            })
        }
        
        //监听提交
        form.on('submit(doSubmit)', function(data){
            var params=$("#dataFrm").serialize();
            $.post(url,params,function(obj){
            	if(obj.code==200){
    				layer.msg(obj.msg);
    				layer.close(mainIndex);
    				//刷新表格
    				tableIns.reload();
    			}else{
    				layer.msg(obj.msg);
    			}
            })
            return false;
        });
        
        //列表操作
        table.on('tool(inportList)', function(obj){
            var layEvent = obj.event,
                data = obj.data;
            if(layEvent === 'del'){ //删除
                layer.confirm('确定删【'+data.inportname+'】进货吗？',{icon:3, title:'提示信息'},function(index){
                    $.post("/inport/deleteInport",{
                        id : data.id  //将需要删除的id作为参数传入
                    },function(data){
                        //刷新table
                        tableIns.reload();
                        //关闭提示框
                        layer.close(index);
                    })
                });
            }
        });
        
        //监控供应商下拉事件
        form.on("select(providerid)",function(data){
        	var providerid=data.value;
        	console.log(providerid);
        	$.post("/goods/loadGoodsByProviderId",{providerid:providerid},function(obj){
        		console.log(obj);
        		$("#goodsid").html("<option value=''>请选择商品</option>");
        		for(var i=0;i<obj.length;i++){
        			$("#goodsid").append("<option value="+obj[i].id+" > "+obj[i].goodsname+"-"+obj[i].size+" </option>")
        		}
        		form.render("select");
        	});
        });
        
        //初始化下拉列表里面的值
        function initProviderSelect(elem,fun){
        	$.post("/provider/loadAllProviderForList?available=1",function(obj){
        		console.log(obj);
        		elem.html("<option value=''>请选择供应商</option>");
            	for(var i=0;i<obj.length;i++){
            		var o=obj[i];
            		elem.append("<option value="+o.id+" > "+o.providername+" </option> ")
            	}
            	form.render("select");
            	if(fun!= undefined ){
            		fun();
            	}
            });
        }
    })
    
</script>
</html>